<template>
  <div class="companyList">
  	<el-breadcrumb separator="/">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>代理公司管理</el-breadcrumb-item>
			<el-breadcrumb-item>代理公司</el-breadcrumb-item>
		</el-breadcrumb>
    <el-form :inline="true" :model="companyParams" ref="companyParams" label-width="120px">
			<el-row>
				<el-form-item label="代理公司名称" prop="companyId">
					<el-select v-model="companyParams.companyId" placeholder="请选择代理公司" class="right-gap">
						<el-option label="全部" value=""></el-option>
						<el-option v-for="item in rCompanyList" :key="item.rCompanyId" :label="item.name" :value="item.rCompanyId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="search" @click="search">查询</el-button>
					<el-button type="danger" icon="setting" @click="resetForm('companyParams')">重置</el-button>
				</el-form-item>
			</el-row>
		</el-form>
		<el-table :data="companyTableData" border fit style="width: 100%">
			<el-table-column align='center' prop="name" label="线路id"></el-table-column>
			<el-table-column align='center' label="操作">
				<template scope="scope">
					<el-button size='small' icon='information' type="warning" @click="detail(scope.row)">经营线路</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class='pagination' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="companyParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="companyParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>

<script>
  export default {
    name: "companyList",
    data() {
      return {
      	total:0,
      	companyParams:{
      		companyId:'',
      		pageSize:10,
      		pageNum:1
      	},
      	rCompanyList:[],
      	companyTableData:[]
      }
    },
    methods: {
    	search(){
    		var that = this;
    		this.$http.post("/validComanyList.shtml",
					"param=" + JSON.stringify(this.companyParams)
				).then(function(data) {
					if(data.code == 200) {
						that.companyTableData = data.data;
						that.total = Number(data.appendix);
					}
				});
    	},
    	reqCompanyList(){
    		var that = this;
    		var data = {
      		companyId:'',
      		pageSize:9999999,
      		pageNum:1
      	}
    		this.$http.post("/validComanyList.shtml",
					"param=" + JSON.stringify(data)
				).then(function(data) {
					if(data.code == 200) {
						that.rCompanyList = data.data;
					}
				});
    	},
    	detail(row){
    		console.log(row.name);
    		this.$router.push("/company/rentalCompanyDetail?companyId="+row.rCompanyId+"&companyName="+row.name);
    	},
    	resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.companyParams.pageSize = val;
				this.search();
			},
			handleCurrentChange(val) {
				this.companyParams.pageNum = val;
				this.search();
			}
    },
    created() {
    	this.search();
    	this.reqCompanyList();
    	var that = this;
    }
  }
</script>
<style>
</style>